<template>
  <div class="box">
    <div class="btop">
      <div class="bt1">
        <div class="btf1">{{ $t("common.jiage") }}</div>
        <div class="btf1">({{ currentSymbolInfo.mainCurName }})</div>
      </div>
      <div class="bt1">
        <div class="btf1">{{ $t("common.shuliang") }}</div>
        <div class="btf1">
          ({{
            curyType != "zhang" ? (
            curyType == "main"
              ? currentSymbolInfo.mainCurName
              : currentSymbolInfo.tokenCurName) : $t('common.zhang')
          }})
        </div>
      </div>
    </div>
    <div class="cenbox" v-show="currentModel == '买盘'">
      <div
        class="cen1"
        @click="choosePrice(priceObj.lastPrice)"
        :class="priceColor == 'green' ? 'green' : 'red'"
      >
        {{ $formatMoney(priceObj.lastPrice, 10) }}
      </div>
      <div class="cen2">{{ $t("common.zhishujia") }} {{ $formatMoney(priceObj.indexPrice, 10) }}</div>
    </div>
    <div class="boxmain" v-show="currentModel != '买盘'">
      <div
        class="box-li"
        @click="choosePrice(item.price)"
        v-for="(item, index) in sells"
        :key="index"
      >
        <div class="boxf1 dred">
          {{ item.price ? $formatMoney(item.price, 10) : "--" }}
        </div>
        <div class="boxf2">{{ item.num || "--" }}</div>
        <div class="bbj hongbg" :style="'width:' + item.width + '%'"></div>
      </div>
    </div>

    <div class="cenbox" v-show="currentModel == '默认'">
      <div
        class="cen1"
        @click="choosePrice(priceObj.lastPrice)"
        :class="priceColor == 'green' ? 'green' : 'red'"
      >
        {{ $formatMoney(priceObj.lastPrice, 10) }}
      </div>
      <div class="cen2">{{ $t("common.zhishujia") }} {{ $formatMoney(priceObj.indexPrice, 10) }}</div>
    </div>
    <div class="boxmain" v-show="currentModel != '卖盘'">
      <div
        class="box-li"
        @click="choosePrice(item.price)"
        v-for="(item, index) in buys"
        :key="index"
      >
        <div class="boxf1 dgreen">
          {{ item.price ? $formatMoney(item.price, 10) : "--" }}
        </div>
        <div class="boxf2">{{ item.num || "--" }}</div>
        <div class="bbj lvbg" :style="'width:' + item.width + '%'"></div>
      </div>
    </div>
    <div class="cenbox" v-show="currentModel == '卖盘'">
      <div
        class="cen1"
        @click="choosePrice(priceObj.lastPrice)"
        :class="priceColor == 'green' ? 'green' : 'red'"
      >
        {{ $formatMoney(priceObj.lastPrice, 10) }}
      </div>
      <div class="cen2">{{ $t("common.zhishujia") }} {{ $formatMoney(priceObj.indexPrice, 10) }}</div>
    </div>
    <div class="bbottom">
      <div class="bb1" @click="levelShow = true">
        <div class="bb1-1">{{ currentLevel }}</div>
        <img class="bb1-2" src="../../../assets/images/xia.png" alt="" />
      </div>
      <img
        @click="modelShow = true"
        class="bb2"
        :src="
          currentModel == '默认'
            ? require('../../../assets/images/m_tl_default.png')
            : currentModel == '买盘'
            ? require('../../../assets/images/m_tl_buy.png')
            : require('../../../assets/images/m_tl_sell.png')
        "
        alt=""
      />
    </div>

    <van-action-sheet
      v-model="levelShow"
      class="defshow"
      @select="changeLevel"
      :actions="levelList"
      :cancel-text="$t('long.quxiao')"
      close-on-click-action
    />
    <van-action-sheet
      v-model="modelShow"
      class="defshow"
      @select="changeModel"
      :actions="modelList"
      :cancel-text="$t('long.quxiao')"
      close-on-click-action
    />
  </div>
</template>

<script>
export default {
  props: ["currentSymbolInfo", "priceObj", "deepthData", "curyType"],
  data() {
    return {
      findex: 1,
      currentSocket: null,
      currentLevel: "0.01",
      currentModel: "默认",
      levelShow: false,
      modelShow: false,
      modelList: [
        { name: "默认", color: "rgb(10, 122, 255)" },
        { name: "买盘" },
        { name: "卖盘" },
      ],
      levelList: [],
      priceColor: "green",
      buys: [],
      sells: [],
      oldDeepParams: ["depthMap", "1", "0", 0.01, "40", "desc"],
    };
  },
  watch: {
    "priceObj.lastPrice"(newval, oldval) {
      if (+newval >= +oldval) {
        this.priceColor = "green";
      } else {
        this.priceColor = "red";
      }
    },
    deepthData(list) {
      this.handleMessage(list);
    },
  },
  created() {},
  methods: {
    choosePrice(price) {
      this.$emit("choosePrice", price);
    },
    handleMessage(list) {
      //深度
      let buys =
        list["0"] &&
        list["0"].map((v) => {
          return {
            price: v[0],
            num: v[1],
            width: v[3] > 1 ? 100 : v[3] * 100,
          };
        });
      let sells =
        list["1"] &&
        list["1"].map((v) => {
          return {
            price: v[0],
            num: v[1],
            width: v[3] > 1 ? 100 : v[3] * 100,
          };
        });
      if (this.currentModel == "默认") {
        this.sells = sells.slice(-10); //mingtian
        this.buys = buys.slice(0, 10);
        this.sells = this.hanldeArrNumOff(this.sells, 10, "sell");
        this.buys = this.hanldeArrNumOff(this.buys, 10, "buy");
      } else {
        this.sells = sells.slice(0, 20);
        this.buys = buys.slice(0, 20);
        this.sells = this.hanldeArrNumOff(this.sells, 20, "buy");
        this.buys = this.hanldeArrNumOff(this.buys, 20, "buy");
      }
    },
    getDeepList() {
      let oldDeepthParams = JSON.stringify({
        type: "unsubscribe",
        params: this.oldDeepParams,
      });
      let deepthParams = JSON.stringify({
        type: "subscribe",
        params: [
          "depthMap",
          this.currentSymbolInfo.symbolName,
          "0",
          this.currentLevel,
        ],
      });
      this.oldDeepParams = [
        "depthMap",
        this.currentSymbolInfo.symbolName,
        "0",
        this.currentLevel,
      ];
      this.$emit("getDeepData", {
        oldDeepthParams,
        deepthParams,
      });
    },
    changeModel(e) {
      this.currentModel = e.name;
      let index = this.modelList.findIndex((v) => v.name === e.name);
      this.modelList = this.modelList.map((v, i) => {
        if (index == i) {
          return {
            name: v.name,
            color: "rgb(10, 122, 255)",
          };
        } else {
          return {
            name: v.name,
          };
        }
      });
    },
    changeLevel(e) {
      this.currentLevel = e.name;
      let index = this.levelList.findIndex((v) => v.name === e.name);
      this.levelList = this.levelList.map((v, i) => {
        if (index == i) {
          return {
            name: v.name,
            color: "rgb(10, 122, 255)",
          };
        } else {
          return {
            name: v.name,
          };
        }
      });
      this.getDeepList();
    },
    hanldeArrNumOff(arr, num, side) {
      if (arr.length < num) {
        let tarr = Array(num - arr.length).fill({
          price: undefined,
          num: undefined,
          width: 0,
        });
        if (side == "sell") {
          arr = tarr.concat(arr);
        } else {
          arr = arr.concat(tarr);
        }
      }
      arr = arr.map((v) => {
        if (v.num) {
          if (this.curyType == "main") {
            //usdt
            v.num = v.num * this.priceObj.lastPrice;
            if (v.num > 1000) {
              v.num =
                (v.num / 1000).toFixed(
                  +this.currentSymbolInfo.mainCurAccuracy
                ) + "k";
            } else {
              v.num = v.num.toFixed(+this.currentSymbolInfo.mainCurAccuracy);
            }
          } else if(this.curyType == 'token') {
            if (v.num > 1000) {
              v.num =
                (v.num / 1000).toFixed(
                  +this.currentSymbolInfo.tokenCurAccuracy
                ) + "k";
            } else {
              v.num = v.num.toFixed(+this.currentSymbolInfo.tokenCurAccuracy);
            }
          }else if(this.curyType == 'zhang'){
            v.num = v.num * this.currentSymbolInfo.sheet;
            if (+v.num > 1000) {
              v.num =
                (v.num / 1000).toFixed(
                  +this.currentSymbolInfo.mainCurAccuracy
                ) + "k";
            } else {
              v.num = parseInt(v.num);
            }
          }
        }
        return v;
      });
      return arr;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding-right: 2vw;
  .btop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1vw;
    // height: 10vw;
    .bt1 {
      text-align: left;
      .btf1 {
        color: #8992AE;
        font-size: 3.2vw;
      }
      &:last-child {
        text-align: right;
      }
    }
  }
}
.boxmain {
  .box-li {
    display: flex;
    justify-content: space-between;
    height: 5.2vw;
    line-height: 5.2vw;
    align-items: center;
    position: relative;
    font-size: 3.2vw;
    &:active {
      background-color: rgba(255, 255, 255, 0.3) !important;
    }
    .bbj {
      position: absolute;
      right: 0;
      top: 0;
      width: 0%;
      height: 100%;
    }
  }
}
.dgreen {
  color: #5eba89;
}
.dred {
  color: #e45360;
}
.hongbg {
  background-color: #b62833;
  opacity: 0.2;
}
.lvbg {
  background-color: #2d8b59;
  opacity: 0.2;
}
.cenbox {
  height: 14vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .cen1 {
    font-size: 3.6vw;
    margin-bottom: 1vw;
    color: #5eba89;
    font-weight: 600;
  }
  .cen2 {
    color: #8992AE;
    font-size: 3.2vw;
  }
}
.bbottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3vw;
  .bb1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 20vw;
    background-color: #171A2B;
    border-radius: 4px;
    padding: 0vw 2vw;
    .bb1-1 {
      color: #8992AE;
      font-size: 3vw;
    }
    .bb1-2 {
      width: 4vw;
      position: relative;
      top: -2px;
    }
  }
  .bb2 {
    width: 4.8vw;
  }
}
.defshow {
  width: 100% !important;
  .van-action-sheet__item {
    background-color: #090A1B;
    color: #8992AE;
    border-top: 1px solid #171A2B;
    padding: 3.2vw 0 !important;
  }

  .van-action-sheet__item:first-child {
    border-top: 0;
  }

  .van-action-sheet__gap {
    background-color: #171A2B;
    height: 0.2vw;
  }

  .van-action-sheet__cancel {
    background-color: #090A1B;
    color: #fff;
    padding: 3.2vw 0 !important;
  }
}
.green {
  color: #5eba89 !important;
}
.red {
  color: #e45360 !important;
}
::v-deep .van-action-sheet {
  background-color: #090A1B !important;
}
</style>